<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载简单的模型</title>

    <link rel="stylesheet" href="../static/css/atom.css">
    <script type="importmap">
    {
        "imports": {
            "three": "../three/v170/three.module.min.js",
            "GLTFLoader":"../three/v170/GLTFLoader.js",
            "DragControls":"../three/v170/DragControls.js",
            "CSS2DRenderer":"../three/v170/CSS2DRenderer.js",
            "OrbitControls":"../three/v170/OrbitControls.js",
            "lil-gui": "../three/v170/lil-gui.module.min.js"
        }
    }
    </script>
</head>

<body>
    <div id="three-box" style="width: 100vw; height: 100vh;"></div>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from "OrbitControls";
        import { GLTFLoader } from "GLTFLoader";
        console.log(`gltf1.html 76 [THREE版本]`, THREE.REVISION);

        let scene, camera, renderer, controls, isPaused;

        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.rotation.set(0, 0, 0);
            // camera.position.set(10, 10, 10);
            camera.position.set(4, 4, 4);
            // camera.position.set(0, 0, 4);

            // 创建渲染器
            renderer = new THREE.WebGLRenderer({
                antialias: true,//
                alpha: true,// 设置背景透明
                physicallyCorrectLights: true,// 开启物理光照
                logarithmicDepthBuffer: true,// 开启深度缓存
                powerPreference: "high-performance",// 
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.getElementById('three-box').appendChild(renderer.domElement);

            renderer.setClearColor(new THREE.Color(0x0c1324), 1); // 设置渲染器背景色


            // 创建坐标轴辅助对象
            var axesHelper = new THREE.AxesHelper(1000);
            scene.add(axesHelper);

            // 添加控制器
            controls = new OrbitControls(camera, renderer.domElement);
            // 添加平移功能
            controls.enablePan = true;

            // 添加环境光
            const ambientLight = new THREE.AmbientLight(0xffffff, 1);
            scene.add(ambientLight);

            // // 添加平行光
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(15, 15, 15);// 设置光源位置
            scene.add(directionalLight);

            // 窗口调整
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });

            const loader = new GLTFLoader();
            var url = 'model/a001-鸭子/duck.gltf';
            var url = 'model/a003-宇航员/宇航员.glb';
            var url = 'model/a002-头盔/DamagedHelmet.glb';
            // var url = 'duck.glb';

            // if (['car.glb'].includes(url)) {
            //     camera.position.set(400, 400, 400);
            // } else if (['婴儿1.glb'].includes(url)) {
            //     camera.position.set(0.5, 0.5, 0.5);
            // } else if (['yang_tuo.glb'].includes(url)) {
            //     camera.position.set(5, 6, 5);
            // }

            loader.load('../' + url, (gltf) => {
                gltf.scene.position.set(2, 0, 0);
                // gltf.scene.scale.set(0.5, 0.5, 0.5)
                gltf.scene.traverse((child) => {
                    if (child.isMesh) {
                        child.geometry.computeBoundingBox();
                        // child.userData.name = 'Duck GLB Model'
                        // child.userData.type = 'GLBModel'
                    }
                })

                scene.add(gltf.scene);
                const mixer = new THREE.AnimationMixer(gltf.scene);
                gltf.animations.forEach((clip) => {
                    mixer.clipAction(clip).play();
                });
                loop(mixer); // 开始动画循环
            }, undefined, (error) => {
                console.error(error);
            });

            loop();
        }

        var skip;
        function loop() {
            skip++;
            requestAnimationFrame(loop);
            if (skip < 3) {
                return;
            } else {
                skip = 0;
            }
            controls.update(); // 更新控制器
            renderer.render(scene, camera); // 渲染场景
        }

        init();
    </script>
</body>
</htm>